<template>


    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 20px;color: #42b983;">用户注册</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="toLogin">已有账号？前去登录</el-button>
            </div>
            <div>
                <el-form :model="reg" :rules="rules" ref="reg" label-width="100px" class="demo-reg">
                    <el-form-item label="注册账号" prop="email">
                        <el-input v-model="reg.email"></el-input>
                    </el-form-item>
                    <el-form-item label="注册密码" prop="pwd">
                        <el-input type="password" show-password v-model="reg.pwd"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="pwd1">
                        <el-input type="password" show-password v-model="reg.pwd1"></el-input>
                    </el-form-item>
                    <el-row :gutter="10">

                        <el-form-item label="验证码" prop="number">
                            <el-col :span="12">
                                <el-input v-model="reg.number">

                                </el-input>
                            </el-col>
                            <el-col :span="12"><img :src="imgSrc" /><br />
                                <el-button type="text" @click="change">看不清楚？换个图片</el-button>
                            </el-col>

                        </el-form-item>
                    </el-row>

                    <el-form-item style="margin-top: 5px">
                        <el-button type="primary" @click="submitForm('reg')">立即注册</el-button>
                        <el-button @click="resetForm('reg')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>


</template>

<script>
import Footer from "../common/Footer";
import { mapMutations } from 'vuex'
import md5 from 'js-md5'
export default {
    name: "Register",
    components: { Footer },
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.reg.pwd) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            imgSrc: "http://localhost:8181/Mobilemall_war/handleYam",
            val: false,
            reg: {
                email: '',
                pwd: '',
                pwd1: '',
                number: "",
            },
            rules: {
                email: [{ required: true, message: '账号不能为空' },
                {
                    type: 'string',
                    message: '邮箱格式不正确',
                    trigger: 'blur',
                    transform(value) {
                        if (!/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value)) {
                            return true
                        } else {
                        }
                    }
                },
                { type: 'string', message: '长度不能超过30位', trigger: 'blur', max: 30 }
                ],
                pwd: [
                    { required: true, message: '输入密码', trigger: 'blur' },
                    { type: 'string', message: '密码长度应保持在6-16之间', trigger: 'blur', min: 6, max: 16 }
                ],
                pwd1: [

                    { required: true, trigger: 'blur', validator: validatePass }
                ],
                number: [
                    { required: true, trigger: 'blur', message: '请输入验证码' }
                ]
            }
        };
    },
    methods: {
        ...mapMutations(['add']),
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let salt = "1a2b3c4d";
                    let str =
                        "" +
                        salt.charAt(0) +
                        salt.charAt(2) +
                        this.reg.pwd +
                        salt.charAt(5) +
                        salt.charAt(4);
                    let str1 =
                        "" +
                        salt.charAt(0) +
                        salt.charAt(2) +
                        this.reg.pwd1 +
                        salt.charAt(5) +
                        salt.charAt(4);
                    console.log(md5(str1));
                    this.axios({
                        method: "get",
                        url: "/user/reg",
                        params: {
                            email: this.reg.email,
                            pwd: md5(str),
                            pwd1: md5(str1),
                            number: this.reg.number
                        }
                    }).then(resp => {
                        if (resp.data == "success") {
                            // this.$store.commit('add',1);
                            this.add(1);
                            alert(this.$store.state.active)
                            this.$store.commit('emailChange', this.reg.email);
                            this.$router.push("/reg_active");
                        } else if(resp.data == "code error"){
                            this.$message.error("验证码错误！");
                        } else {
                            this.$message.error("注册失败！");
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //切换验证码
        change() {
            this.imgSrc = 'http://localhost:8181/Mobilemall_war/handleYam?a=' + Math.random()
        },

        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        toLogin() {
            this.$router.push("/login")
        }
    },
    created() {
        window.sessionStorage.setItem('myActive', 0);
    }

}
</script>

<style scoped>
.el-main {
    /*#E9EEF3*/
    background-color: #E9EEF3;
    color: #333;
    line-height: 20px;
}
</style>
